<template>
  <div class="middle">
    <div class="header"></div>
    <div class="china">
      <div class="map1"></div>
      <div class="map2"></div>
      <div class="map3"></div>
      <div class="map4"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.middle {
  padding: 10px;
  width: 100%;
  .china {
    position: relative;
    width: 100%;
    height: 100%;
    .map1 {
      width: 600px;
      height: 600px;
      // background-color: red;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-image: url(../../assets/picture/lbx.png);
      background-size: 100% 100%;
      animation: run 15s infinite linear;
    }
    .map2 {
      width: 600px;
      height: 600px;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-image: url(../../assets/picture/jt.png);
      background-size: 100% 100%;
      animation: run 15s infinite linear reverse;
    }

    .map3 {
      width: 546px;
      height: 546px;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-image: url(../../assets/picture/map.png);
      background-size: 100% 100%;
      opacity: 0.3;
    }
  }
}

@keyframes run {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}
</style>
